<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/WEB-INF/head/validator.jsp"%>
<%@ include file="/WEB-INF/head/style.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/select.js"></script>
<script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<link href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<style type="text/css">
#xiaoshi {
	display: none;
}
.pagenumber{
padding-left: 85px;
}
#addbutton {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #006dcc;
	background-image: linear-gradient(to bottom, #08c, #04c);
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	background-repeat: repeat-x;
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 20px;
}
.message{
color:red;
}
<!--
把表的id隐藏
-->#center_b {
	text-align: center;
	width: 100%;
	height: 100%;
	margin: 0px;
}
</style>
<script type="text/javascript">
$(function () {
    $(".datepicker").datepicker({
        language: "zh-CN",
        autoclose: true,//选中之后自动隐藏日期选择框
        clearBtn: true,//清除按钮
        todayBtn: true,//今日按钮
        format: "yyyy-mm-dd"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
    });
    //数据验证
    $("#updateForm").bootstrapValidator({
        message:'This value is not valid',
//        定义未通过验证的状态图标

        feedbackIcons: {/*输入框不同状态，显示图片的样式*/
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
//        字段验证

        fields:{
//           姓名


            personName:{
                message:'姓名非法',
                validators:{
//                    非空

                    notEmpty:{
                        message:'姓名不能为空'
                    },
//                    限制字符串长度

                    stringLength:{
                        min:2,
                        max:10,
                        message:'姓名长度必须位于2到10之间'
                    },
//                    基于正则表达是的验证

                    regexp:{
                        regexp:/^[\u4e00-\u9fa5]{2,10}$/,
                        message:'姓名由汉字组成'
                    }
                }
            },
            
//          身份证号码
            identityNumber:{
                message:'身份证号码非法',
                validators:{
//                    非空

                    notEmpty:{
                        message:'身份证号码不能为空'
                    },
//                    限制字符串长度

                    stringLength:{
                        min:18,
                        max:18,
                        message:'身份证号码长度必须为18位数字'
                    },
//                  基于正则表达是的验证

                    regexp:{
                    	regexp:/^[a-zA-Z0-9]+$/,
                        message:'身份证号码由数字字母组成'
                    },
                   remote: {
                       url: '/test/validateIDCard.do',
                       message: '身份证号码已存在',
                       type: 'POST',
                       data:{
                    	
                       	  id: function(){ return $("#id").val(); }
                        }
                    },
                   
                }
            },
            
              gender:{
                  validators:{
                      notEmpty:{
                          message:'请选择性别'
                      },
                  }
              },
              
              maritalStatus:{
                  validators:{
                      notEmpty:{
                          message:'请选择婚姻状况'
                      },
                  }
              },
              
              birthTime:{
                  validators:{
                      notEmpty:{
                          message:'请输入出生日期'
                      },
                      remote: {
                          url: '/test/validateBirthTime.do',
                          message: '日期不合法',
                          type: 'POST',
                       },
                   
                  }
              },
              
//            配偶姓名

              spouseName:{
                  message:'配偶姓名非法',
                  validators:{
//                      限制字符串长度

                      stringLength:{
                          min:2,
                          max:10,
                          message:'配偶姓名长度必须位于2到10之间'
                      },
//                      基于正则表达是的验证

                      regexp:{
                          regexp:/^[\u4e00-\u9fa5]{2,10}$/,
                          message:'配偶姓名由汉字组成'
                      }
                  }
              },
        }
    })
	$('#birth_time').datepicker({
		format: 'yyyy-mm-dd',
		language:  "zh-CN",  
	    todayBtn : "linked",  
	    autoclose : true,  
	    todayHighlight : true,  
	    clearBtn:true,  
	    }).on('changeDate',function(e) {  
	        $('#updateForm').data('bootstrapValidator')
	        .updateStatus('birthTime', 'NOT_VALIDATED',null)  
	        .validateField('birthTime');  
	});  
})
function delete1(){
    var id=$("#addbutton").attr("em_id");
    if(confirm("是否删除此条信息？")){
      $.ajax({
      type:'post',
      url:'/test/deleteemployee.do',
      data:'id='+id,//获取当前对象的属性(自定义属性)sno的值，用自定义属性保存相应需要的数据
      success:function(){
 	  alert("删除成功");
 	  window.location.reload();
  },
  error:function(){
 	 alert("删除失败");
  }
 })
}
}
var pa="${pa+1}";
var pages="${pages}";
if(pa==1){
$("#first").hide();
$("#previous").hide();	
}
if(pa>pages){
	$("#last").hide();
	$("#next").hide();
}

</script>
</head>
<body>
	<!-- 修改模态窗口 -->
	<div class="modal fade"  tabindex="-1" role="dialog" id="myModal"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
				<div class="modal-header">
					<button type="button" class="close" 
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">修改</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" action="/test/updatePerson.do" id="updateForm"
						method="post" >
						<fieldset>
							<div class="xiaoshi" id="xiaoshi">
								<label class="control-label" for="focusedInput">id</label>
								<div class="controls">
									<input type="hidden" class="input-xlarge focused" id="id" name="id"
										type="text">
								</div>
							</div>
							<div class="form-group">
       				<label for="personName" class="col-sm-2 control-label">姓名</label>
  					<div class="col-sm-6">
       						<input type="text" class="form-control" id="person_name" name="personName"  placeholder="请输入姓名"value="">
  					</div>
 			   </div>
 			 
 			    <div class="form-group">
       				<label for="birthTime" class="col-sm-2 control-label">出生日期</label>
  					<div class="col-sm-6">
							<input type="text"  name="birthTime" id="birth_time" class="form-control" value="" />
  					</div>
 			 </div>
 			 			
			  <div class="form-group">
       				<label for="identityNumber" class="col-md-2 control-label">身份证号码</label>
  					<div class="col-md-6">
       						<input type="text" class="form-control" id="identity_number" name="identityNumber"  maxlength="18"value="">
  					</div>
 			 </div>
 			 
			<div class="form-group">
				<label for="gender" class="col-md-2 control-label">性别</label> 
				<div class="col-md-2">
					<input type="hidden" id="gender2" value=""/> 
					          <select class="form-control" id="sex" name="gender" style="width: 200px;">
					          		<option id="" value="">请选择性别</option>
					          		<option id="dontnosex" value="0">未知的性别</option>
					          		<option id="man" value="1">男</option>
					          		<option id="women" value="2">女</option>
					          		<option id="nosex" value="9">未说明的性别</option>
					          </select>
				</div>
			</div>
			<div class="form-group">
				<label for="maritalStatus" class="col-md-2 control-label">婚姻状况</label> 
				<div class="col-md-6 " >
					<input type="hidden" id="maritalStatus2" value=""/> 
					          <select class="form-control" id="matital_status" name="maritalStatus" style="width: 200px;">
					          		<option id="" value="">请选择婚姻状况</option>
					          		<option id="10" value="10">未婚</option>
					          		<option id="21" value="21">初婚</option>
					          		<option id="22" value="22">再婚</option>
					          		<option id="23" value="23">复婚</option>
					          		<option id="30" value="30">丧偶</option>
					          		<option id="40" value="40">离婚</option>
					          		<option id="50" value="90">未说明的婚姻状况</option>
					          </select>
				</div>
			</div>

			<div class="form-group">
       				<label for="spouseName" class="col-md-2 control-label">配偶姓名</label>
  					<div class="col-md-6">
       						<input type="text" class="form-control" id="spouse_name" name="spouseName" value="" placeholder="请输入配偶姓名"disabled="disabled">
  					</div>
 			 </div>

			<div class="form-inline col-md-offset-8">
				<button  type="submit" class="btn btn-primary" onclick="save()">保存并关闭 </button>
			</div>
			<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
				</fieldset>
					</form>
					</div>
					</div>
				</div>
			
			<!-- /.modal-content -->
		<!-- /.modal-dialog -->

	 <div class="pannel">
	 <div class="pannel-header">
			<h4>员工查询</h4>
	</div>
	<form class="form-horizontal" action="/test/getPersonList.do?page=0&size=10"
									method="post">
									<fieldset>
										<input type="hidden" name="page" value="0">
										<div class="control-group">
											<label class="control-label" for="focusedInput">姓名:</label>
											<div class="controls">
												<input class="input-xlarge focused" id=""
													type="text" name="personName" value="">
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="focusedInput">出身年份:</label>
											<div class="controls">
												<input class="input-xlarge focused" id=""
													type="text" name="birthTime" value="">
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="focusedInput">身份证号码：</label>
											<div class="controls">
												<input class="input-xlarge focused" id=""
													type="text" name="identityNumber" value="">
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="focusedInput">性別</label>
											<div class="controls">
												<input class="input-xlarge focused" id="no" type="radio"
													name="sex" value="0">未知性别 <input
													class="input-xlarge focused" id="man" type="radio"
													name="sex" value="1">男<input
													class="input-xlarge focused" id="women" type="radio"
													name="sex" value="2">女 <input
													class="input-xlarge focused" id="nosay" type="radio"
													name="sex" value="9">未说明性别
											</div>
										</div>
										<div
											style="text-align: center; width: 70%; height: 100%; margin: 0px;">
											<input class="btn btn-primary btn-lg" type="submit"
												value="查詢" >
										</div>
									</fieldset>
								</form>
			</div>
 <div class="pannel">
	 <div class="pannel-header">
			<h4>查询结果</h4>
	</div>
 <table width=100%
		class="table table-condensed table table-striped table-bordered table-hover"
		id="table">
		<thead>
			<tr>
				<td id="xiaoshi">id</td>
				<td>姓名</td>
				<td>创建时间</td>
				<td>最后更新时间</td>
				<td>性別</td>
				<td>生日</td>
				<td>身份证号</td>
				<td>婚姻状况</td>
				<td>配偶姓名</td>
				<td><a  type="button" href="addemployee.jsp" id="add"
					class="btn btn-primary btn-lg"  onclick="window.open(this.href);return false"
					 >添加</a></td>
				<!-- 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，
		同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
                        通过 JavaScript：使用这种技术，可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：$('#identifier').modal(options)  -->
			</tr>
		</thead>
	<c:choose>
	<c:when test="${personlist.size() >0}" >  
		<c:forEach var="plist" items="${personlist}" varStatus="vs">
			<tbody>
				<tr>
					<td id="xiaoshi">${plist.id}</td>
					<td>${plist.personName}</td>
					<td>${plist.createTime}</td>
					<td>${plist.lastUpdateTime}</td>
					<td>${plist.gender}</td>
					<td>${plist.birthTime.toString().substring(0, 10)}</td>
					<td>${plist.identityNumber}</td>
					<td>${plist.maritalStatus}</td>
					<td>${plist.spouseName}</td>
					<!-- 按钮触发模态框 -->
					<td><input type="button" id="addbutton" class="btn btn-primary btn-lg"
						em_id="${plist.id}" value="删除" onclick="delete1()"/> <input data-toggle="modal"
						data-target="#myModal" class="btn btn-primary btn-lg"
						type="button" id="${vs.index+1}" value="修改"
						onclick="editInfo(this)" /> <!-- ${status.index}      输出行号，从0开始。
                             ${status.count}      输出行号，从1开始。
                             ${status.current}   当前这次迭代的（集合中的）项 -->
				</tr>
			</tbody>
		</c:forEach>
			</table>
			</div>
	<div >
	  <ul class="pagination" id="pagination">
	  		<li id="previous"><a href="/test/getPersonList.do?page=${page-1}&size=${size}&personName=${personName}&sex=${sex}&birthTime=${birthTime}&identityNumber=${identityNumber}" >&laquo;</a></li>
	       <c:forEach var="i" begin="1" end="${pageAmount}" step="1">
	            <li><a href="/test/getPersonList.do?page=${i-1}&size=${size}&personName=${personName}&sex=${sex}&birthTime=${birthTime}&identityNumber=${identityNumber}"> ${i} </a></li>
	       </c:forEach>
	       <li id="next"><a href="/test/getPersonList.do?page=${page+1}&size=${size}&personName=${personName}&sex=${sex}&birthTime=${birthTime}&identityNumber=${identityNumber}">&raquo;</a></li>
	  </ul>
	  </div>
	
	<div  class="div">
	  <p class="form-control-static">共${pageAmount}页，共有${element}条记录，当前第${page+1}页</p>
	  </div>

	</c:when>
	<c:otherwise>
	</c:otherwise>
</c:choose>
		<script>
		$("#maritalStatus").change(function(){
		$select = $(this);
		if(this.value=="10"||this.value=="90"||this.value==""){
			$("#spouse_name").prop('disabled', true);
		} else {
			$("#spouse_name").prop('disabled', false);
		}
		});
		function save(){
			alert("修改成功");
		}
		if("${page}"<1){
			$("#previous").hide();
		}
		if("${page}">"${pageAmount-2}" ){
			$("#next").hide();
		}
		if("${pageAmount}"<=1){
			$("#pagination").hide();
		}
		</script>
</body>
</html>
